<!doctype html>
<html>
<head>

  <title>observeContent</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../polymer.html">

</head>
<body>

  <dom-module id='test-content'>
    <template>
      [<content id="ip"></content>]
    </template>
    <script>
    (function() {
      Polymer({
        is:'test-content',
        created: function() {
        },
        // _setupRoot: function() {
        //   Polymer.Base._setupRoot.call(this);
        //   Polymer.dom(this.$.ip).observeNodes(function(info) {
        //     console.log('internal', info.changes[0]);
        //   });
        //   Polymer.dom(this.$.ip).observer.includeChanges = true;
        // }
      });
    })();
    </script>
  </dom-module>

  <dom-module id='test-static'>
    <template>
      My children do not render.
    </template>
    <script>
      Polymer({
        is:'test-static',
        created: function() {
        }
      });
    </script>
  </dom-module>
  
  <test-content id="content">
    <div>content A</div>
    <div>content B</div>
  </test-content>

  <br><br>

  <test-static id="stat"><div>static A</div><div>static B</div></test-static>

  <script>
  function obs(info) {
    console.log('custom observer', info);
  }

  Polymer.dom(content.$.ip).observeNodes(function(info) {
    console.log(info);
  }, true);
  Polymer.dom(content).flush();
  Polymer.dom(stat).flush();
  console.group('test dynamic');

  var d = document.createElement('div');
  d.id = 'foo';
  d.innerHTML = 'Dynamic!';
  Polymer.dom(content).flush();
  Polymer.dom(content).appendChild(d);
  Polymer.dom(content).flush();
  // Polymer.dom(content).removeChild(d);
  // Polymer.dom(content).flush();
  console.groupEnd('test dynamic');
  </script>

</body>
</html>
